<template>
	<view class="content" :style="$theme.pageStyle">
		<view class="flow" style="align-items: center;justify-content: center;display: flex;">
			<span class="is-this">提交问题</span>
			<i style="margin-left: 10px;margin-right: 10px;">></i>
			<span>等待律师</span>
			<i style="margin-left: 10px;margin-right: 10px;">></i>
			<span>开始咨询</span>
		</view>
		<view class="chat_box">
			<view class="chat-content">
				<scroll-view scroll-y :show-scrollbar="false" :scroll-into-view="scrollIntoView"
					:scroll-with-animation="true" style="height: 100%;">
					<view v-for="(items, index) in chatDetail" :key="index" :id="'y'+ index" style="">

						<view class="chat-text section-left flex" v-if="items.self == 0">
							<span class="char-img" :style="{ backgroundImage: 'url(' + items.avatar + ')' }"></span>
							<span class="text">
								<span v-if="items.type == 0">{{items.msg}}</span>
								<span v-if="items.type == 1">
									<view class="xjpc-1-qa-dialog-content-wrapper xjpc-1-showOptions">
										<view class="xjpc-1-qa-dialog__text">
											<p>{{items.msg}}</p>
										</view>
									</view>
								</span>

							</span>
						</view>

						<view class="chat-text section-right flex" v-else-if="items.self == 1">
							<span class="text" style="background: #cce4fc;">{{items.msg}}</span>
							<span class="char-img" :style="{ backgroundImage: 'url(' + items.avatar + ')' }"></span>
						</view>
						<view class="section-right flex" style="margin-top: -15px;" v-if="items.self == 1">
							<view class="" style="margin-right: 70px;color: #4e6ef2;" @click="Change()">
								修改问题
							</view>
						</view>


						<view class="price-bar price-2 price-pay-msg" v-if="items.card == 1">
							<view class="rt-tag">
								新用户优惠
							</view>
							<view class="">
								<view class=""
									style="display: flex;justify-content: space-between;margin-top: 5px;margin-bottom: 5px;">
									<span style="font-size: 22px;color: #000;font-weight: bold;">在线咨询服务</span>
									<span class="num"
										style="font-size: 16px;color: #eb3c3c;margin-left: 5px;font-weight: bold;">
										¥
										<span class="din-b"
											style="font-size: 22px;vertical-align: baseline;">{{ Cate.price }}</span>
									</span>

								</view>
								<view class="tag-group" style="display: flex;margin-bottom: 5px;">
									<view class="u-tag">
										限时优惠
									</view>
									<view class="u-tag">
										60分钟即时服务
									</view>
									<view class="u-tag">
										未服务自动退款
									</view>
								</view>
								<view class="">
									<view class="" style="color: #333;line-height: 25px;">
										<uni-icons type="fire" color="#494f5c" size="16"></uni-icons> 快速响应，平均5分钟回复
									</view>
									<view class="" style="color: #333;line-height: 25px;">
										<uni-icons type="chatboxes" color="#494f5c" size="16"></uni-icons>
										不限次沟通，有效时间内无限次追问
									</view>
									<view class="" style="color: #333;line-height: 25px;">
										<uni-icons type="checkbox" color="#494f5c" size="16"></uni-icons> 问题解决率高达99%
									</view>
								</view>
							</view>
							<view class="give-box">

							</view>
							<view class="count-tip tc" style="text-align: center;font-size: #999;font-size: 14px;">
								今日已有 <span class="s-c6 mt-2">{{randomNumber}}</span> 位用户使用
							</view>
						</view>


					</view>
				</scroll-view>

			</view>

		</view>

		<view class="footer" v-if="subItem">
			<view class="footer-wrapper">
				<view class="input-wrapper">
					<input class="input" confirm-hold cursor-spacing='10' v-model="text" @confirm="handleSend" />
					<button class="send" @click="handleSend()">
						发送
					</button>
				</view>
			</view>
		</view>

		<view class="bottom-bar u-skeleton-fillet" v-if="Pay">
			<view class="bottom-tab-ask">
				<view class="bottom-tab-ask-li">
					<button type="default" class="u-btn btn-primary btn-n btn-block" @click="ShowPay()">提交订单
						<span class="f13">
							（￥{{ Cate.price }}）
						</span>
					</button>
				</view>
			</view>
		</view>
		
		<!-- 支付pop -->
		<u-popup :show="paypop" mode="bottom" :round="15" @close="closespaypop" @open="openpaypop">
			<view style="padding-bottom: 30rpx;height: 350px;" class="showbottom">
				<view class="pay-type-list">
					<view class="pay-title">请选择支付方式：</view>
					<radio-group class="uni-flex" name="gender">
						<block v-for="(item, index) in payList" :key="index">
							<view class="type-item" :class="{ 'act': index === selectedIndex }" @click="selectNav(item,index)">
								<image :src="item.icon" mode="" class="a-img"></image>
								<view class="con">
									<text class="tit">{{item.pay_way_name}}</text>
								</view>
							</view>
						</block>
					</radio-group>
				</view>
				<view class="botton" @click="topay()">
					<text class="text110">确认支付</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				title: 'Hello',
				about: '',
				banners: [],
				chatDetail: [],
				config: {},
				kefu: {},
				status: 0,
				showkefus: false,
				showchoose: true,
				subItem: true,
				Pay: false,
				order: false,
				scrollIntoView: "",
				text: '',
				question: '',
				Cate: {},
				randomNumber: this.round(),
				paypop: false,
				payList: uni.getStorageSync('pay'),
				Payinfo: {},
				pay_way: 1,
				selectedIndex: 10,
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
			}
		},
		created() {

		},
		onLoad() {
			this.getInfo();
		},

		methods: {
			getInfo() {
				this.createMessage()
				this.getCateInfo()
			},
			closespaypop(){
				this.paypop = false
			},
			openpaypop(){},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
			},
			ShowPay(){
				this.paypop = true
			},
			round() {
				return String(Math.floor(Math.random() * 10000)).padStart(4, '0');
			},
			async getCateInfo() {
				try {
					const res = await $H.post('index/askcateinfo', {

					}, {
						token: true
					});
					this.Cate = res.data.cate
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			async topay() {
				try {
					const res = await $H.post('order/CreateNConsultOrder', {
						pay_way: this.pay_way,
						type:1,
						ask: this.question
					}, {
						token: true
					});
					
					this.paypop = false
					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/order/consult/index'
								})
							}, 400)
						} else if(res.data.code == 2){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							// this.paypop = false
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/order/consult/index'
										})
									}, 400)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
					
					
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			createMessage() {
				//构建信息
				//构建第一条信息
				// 'type' : 0, 0 文字 1文字加选项 2 富文本 
				setTimeout(() => {
					let data = {
						'msg': '你好，我是律师助手' + uni.getStorageSync('def_name') + '！',
						'self': 0,
						'type': 0,
						'avatar': uni.getStorageSync('def_avatar'),
					}
					this.chatDetail.push(data)
				}, 1000)

				setTimeout(() => {
					let data = {
						'msg': '系统自动将你可能需要咨询的问题复制在下方输入框，你可以结合的自己情况，修改后发送!',
						'self': 0,
						'type': 0,
						'avatar': uni.getStorageSync('def_avatar'),
					}
					this.chatDetail.push(data)
				}, 3000)
			},
			handleSend() {

				if (this.text.length <= 5) {
					return uni.showToast({
						icon: "none",
						title: '请输入大于5个字的问题！'
					})
				}

				let data = {
					'msg': this.text,
					'self': 1,
					'type': 0,
					'avatar': uni.getStorageSync('user_avatar'),
				}

				this.chatDetail.push(data)

				this.question = this.text

				//清空输入框
				this.text = '';

				setTimeout(() => {
					let data = {
						'msg': '已收到您的咨询啦，提问成功后会立即为您匹配合适的律师！',
						'self': 0,
						'type': 0,
						'avatar': uni.getStorageSync('def_avatar'),
					}
					this.chatDetail.push(data)
				}, 500)

				this.tobottom()

				this.subItem = false

				this.Pay = true

				this.pushcard()

			},
			Change() {

				this.Pay = false

				this.subItem = true

			},

			pushcard() {
				setTimeout(() => {
					let data = {
						'card': 1
					}
					this.chatDetail.push(data)
					this.tobottom()
				}, 500)

			},
			tobottom() {
				setTimeout(() => {
					let lastIndex = this.chatDetail.length - 1
					this.scrollIntoView = 'y' + lastIndex
				}, 300)

				setTimeout(() => {
					let lastIndex = this.chatDetail.length - 1
					this.scrollIntoView = 'y' + lastIndex
				}, 800)
			},
			


		}
	}
</script>

<style>
	page{
		background: #f2f2f2;
	}
</style>

<style lang="scss" scoped>
	
	.price-2 {
		margin-left: 0.7rem;
		margin-right: 0.7rem;
	}

	.price-bar {
		position: relative;
		padding: 1rem 1rem 0.75rem;
		background-color: #fff;
		border-radius: 0.25rem;
		margin: 1rem 0.4rem 1rem;
	}

	.price-2 .rt-tag {
		position: absolute;
		top: 0;
		right: 0;
		width: 3.35rem;
		height: 1.3rem;
		padding: 0;
		font-size: .55rem;
		color: #fff;
		line-height: .9rem;
		text-align: center;
		background: url('//css.66law.cn/ui_v2/m/pic/ask/dialogue/lable_sale.png') no-repeat;
		background-size: cover;
	}

	.price-2 .tag-group {
		margin-bottom: 0.3rem;
	}

	.price-bar .tag-group .u-tag {
		float: left;
		margin: 0 5px 0 0;
		border: 1px solid #ef5858;
		border-radius: 2px;
		padding: 2px 5px;
		background-color: transparent;
		font-size: 12px;
		color: #ef5858;
		line-height: 15px;
	}

	// .price-2 .tag-group .u-tag {
	// 	float: left;
	// 	margin: 0 5px 0 0;
	// 	border: 1px solid #ef5858;
	// 	border-radius: 2px;
	// 	padding: 2px 5px;
	// 	background-color: transparent;
	// 	font-size: 12px;
	// 	color: #ef5858;
	// 	line-height: 15px;
	// }

	.price-bar span .num {
		float: left;
		font-size: .75rem;
		color: #eb3c3c;
		margin-left: 0.5rem;
	}

	.price-bar span .num {
		position: relative;
	}

	.price-2 .count-tip {
		margin-top: 0.3rem;
	}

	.flow {
		height: 40px;
		background-color: #fff;
		text-align: center;
		font-size: 16px;
		color: #bbb;
		line-height: 40px;
	}

	.flow .is-this {
		color: var(--color-primary);
	}

	.flow i {
		margin: 0 0.7rem;
		color: #e8e8e8;
	}

	.content {
		height: 100%;
		background: #f2f2f2;
	}

	.banner {
		height: 25%;
	}

	.bottom-bar {
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 100%;
		z-index: 100;
	}

	.bottom-tab-ask {
		background-color: #fff;
	}

	.bottom-tab-ask-li {
		padding: 15px 20px;
	}

	.u-btn.btn-block {
		display: block;
		width: -webkit-fill-available;
	}

	.u-btn.btn-n {
		padding: 0 1rem;
		height: 50px;
		line-height: 50px;
		border-radius: 35px;
	}

	.u-btn.btn-primary {
		border-color: var(--color-primary);
		background-color: var(--color-primary);
		color: #fff;
	}

	.u-btn.btn-primary1 {
		border-color: #666;
		background-color: #666;
		color: #fff;
	}


	.f13 {
		font-size: .65rem !important;
	}

	.showbottom {
		padding: 20px;
	}

	.act {
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}

	.showbottom {
		padding: 20px;
	}

	.btn {
		position: fixed;
		bottom: 0px;
		padding-bottom: 20px;
		width: 100%;
		border-radius: 15px 15px 0px 0px;
		background: #fff;

		.btns {
			margin: 10px;
		}
	}


	.chat_box {
		height: 70%;

		.chat-content {
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
			height: 100%;
			padding: 10px;
			background: #f2f2f2;
		}

		.chat-content .section-left {
			justify-content: flex-start;
		}

		.chat-content .section-right {
			justify-content: flex-end;
		}

		.chat-content .chat-text {
			margin-top: 10px;
			margin-bottom: 20px;
		}

		.chat-content .char-img {
			width: 45px;
			height: 45px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 50%;
			margin: 0 10px;
		}

		.chat-content .text {
			min-width: 18px;
			margin: 0 15px px;
			line-height: 20px;
			padding: 12px;
			border-radius: 8px;
			max-width: 240px;
			position: relative;
			word-break: break-all;
			font-size: 14px;
			font-weight: 400;
			color: #030303;
			background-color: #fff;
		}

		.chat-content .chat-text .icon {
			position: absolute;
			top: 0.1rem;
			color: #fff;
		}

		.chat-content .section-left .icon {
			left: -0.2rem;
		}

		.chat-content .section-right .icon {
			right: -0.2rem;
		}
	}

	.flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}


	.xjpc-1-showOptions {
		min-width: 220px;
		max-width: 244px;
		line-height: 20px;
		border-radius: 8px;
		position: relative;
		min-height: 40px;
		margin-left: 15px;
		background: #fff;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.xjpc-1-qa-dialog-content-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.xjpc-1-qa-dialog__text {
		min-width: 18px;
		line-height: 20px;
		padding: 5px;
		border-radius: 8px;
		max-width: 240px;
		position: relative;
		word-break: break-all;
		font-size: 14px;
		font-weight: 400;
		color: #030303;
	}

	.xjpc-1-qa-dialog__text p {
		word-break: break-all;
	}

	.xjpc-1-type1-option-button-wrapper {
		border-top: 0.5px solid rgba(0, 0, 0, .1);
		padding-top: 8px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		background: #fff;
	}

	.xjpc-1-type1-option-button {
		in-width: 106px;
		width: 106px;
		border-radius: 4px;
		font-size: 12px;
		line-height: 32px;
		font-weight: 500;
		cursor: pointer;
		height: 32px;
		padding: 0;
		text-align: center;
	}

	.xjpc-1-type1-option-button:not(:last-child) {
		margin-bottom: 8px;
	}

	.xjpc-1-type1-option-button:nth-child(odd) {
		margin-right: 8px;
	}


	.u-size-mini {
		height: 32px !important;
	}

	.xjpc-1-transform-container {
		width: 100%;
		z-index: 100;
		// bottom: 80px;
		display: block;
		pointer-events: all;
		// position: absolute;
	}

	.xjpc-1-transform {
		text-align: center;
		margin: 0;
	}

	.xjpc-1-transform .xjpc-1-transform-2 {
		text-align: center;
		max-width: 400px;
	}

	.xjpc-1-transform .xjpc-1-transform-2 .xjpc-1-small-btn-wrapper {
		width: 100%;
		border-radius: 8px;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: 32px;
		padding-right: 82px;
		background-color: #fff;
		position: relative;
	}

	.xjpc-1-transform .xjpc-1-transform-2 .xjpc-1-small-btn-wrapper .xjpc-1-avatar {
		border-radius: 4px;
		width: 55px;
		height: 55px;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-item-align: start;
		align-self: flex-start;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin: 7px 3px 7px -20px;
	}

	.xjpc-1-avatar image {
		height: 55px;
		height: 55px;
	}

	.xjpc-1-transform .xjpc-1-transform-2 .xjpc-1-small-btn-wrapper .xjpc-1-fixedBtn-text {
		width: 100%;
		-ms-flex-item-align: start;
		align-self: flex-start;
		margin-top: 12px;
		padding: 0 4px 0 12px;
	}

	.xjpc-1-transform .xjpc-1-transform-2 .xjpc-1-small-btn-wrapper .xjpc-1-fixedBtn-text .xjpc-1-text-top {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: baseline;
		-ms-flex-align: baseline;
		align-items: baseline;
	}

	.xjpc-1-transform .xjpc-1-transform-2 .xjpc-1-small-btn-wrapper .xjpc-1-fixedBtn-text .xjpc-1-text-top .xjpc-1-text-title {
		font-size: 16px;
		font-weight: 500;
		color: #030303;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}

	.xjpc-1-transform .xjpc-1-transform-2 .xjpc-1-small-btn-wrapper .xjpc-1-fixedBtn-text .xjpc-1-text-desc {
		font-size: 12px;
		color: #868e9f;
		white-space: nowrap;
		text-align: left;
		overflow: hidden;
		text-indent: 1px;
		text-overflow: ellipsis;
		display: block;
	}

	.xjpc-1-transform .xjpc-1-transform-2 .xjpc-1-small-btn-wrapper .xjpc-1-transform-btn {
		right: 10px;
		position: absolute;
		top: 50%;
		-webkit-transform: translatey(-50%);
		transform: translatey(-50%);
	}

	.xjpc-1-transform .xjpc-1-transform-2 .xjpc-1-small-btn-wrapper .xjpc-1-transform-btn .xjpc-1-download-button {
		margin: 10px 0;
		display: -webkit-inline-box !important;
		display: -ms-inline-flexbox !important;
		display: inline-flex !important;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		min-width: 70px;
		border-radius: 4px;
		line-height: 31px;
		height: 31px;
		padding: 0px 4px;
		color: #fff;
		background-color: #fff;
	}

	.botton {
		bottom: 0;
		height: 20px;
		width: 100%;
		position: absolute;
		text-align: center;
		font-size: 12px;
		color: #868e9f;
	}

	.isfiexd {
		width: 94%;
		z-index: 100;
		display: block;
		pointer-events: all;
		position: fixed;
		bottom: 5%;
	}

	.footer {
		// border-top: 1rpx solid #dfdfdf;
		background-color: #efefef;
		position: fixed;
		bottom: 0;
		padding-bottom: 20px;
		border-radius: 15px 15px 0px 0px;
		width: 100%;
		z-index: 3;
	}

	.footer>.footer-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		margin: 30rpx;
	}

	.footer>.footer-wrapper>.mode {
		text-align: center;
		flex-shrink: 0;
		margin-right: 30rpx;
	}

	.input-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		flex: 1;
	}

	.input {
		background-color: #fff;
		padding: 10rpx 10rpx;
		border-radius: 15rpx;
		flex: 1;
		height: 45px;
	}

	.send {
		margin-left: 15rpx;
		height: 76rpx;
		background-color: #3b82f6;
		color: white;
		border-radius: 15rpx;
		width: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: inherit;
		padding: 0;
		font-size: 14px;
		border-width: 0;
	}

	.send::after {
		border: 0;
	}

	.send.disabled {
		pointer-events: none;
		opacity: .3;
	}
	
	.showbottom {
		padding: 20px;
	}
	
	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;
		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}
	
		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;
			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}
	
		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}
	
		.icon {
			width: 100upx;
			font-size: 52upx;
		}
	
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
	
		.icon-weixinzhifu {
			color: #36cb59;
		}
	
		.icon-alipay {
			color: #01aaef;
		}
	
		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}
	
		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}
	
	.act{
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}
	
	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}
	
	
	.botton {
		bottom: 20px;
		position: fixed;
		width: 90%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	
	
</style>